<template>
  <n-grid cols="1 s:1 m:1 l:4 xl:4 2xl:4" responsive="screen">
    <n-grid-item>
      <n-form :label-width="80" :model="formParams" :rules="rules" ref="formRef">
        <n-form-item label="用户默认头像" path="user_image">
          <BasicUpload
              :action="`${uploadUrl1}/api/common/cosupdate`"
              :width="100"
              :height="100"
              name="file"
              @uploadChange="changeSitePicture"
              :max="1"
              :maxSize="10"
              v-model:value="user_image"
              helpText="单个文件不超过10MB，最多只能上传1个文件"
          />
        </n-form-item>

        <n-form-item label="代理商默认头像" path="agent_image">
          <BasicUpload
              :action="`${uploadUrl1}/api/common/cosupdate`"
              :width="100"
              :height="100"
              name="file"
              @uploadChange="changeSitePictureagent"
              :max="1"
              :maxSize="10"
              v-model:value="agent_image"
              helpText="单个文件不超过10MB，最多只能上传1个文件"
          />
        </n-form-item>

        <n-form-item label="地图图标" path="map_image">
          <BasicUpload
              :action="`${uploadUrl1}/api/common/cosupdate`"
              :width="100"
              :height="100"
              name="file"
              @uploadChange="changeSitePicturemap"
              :max="1"
              :maxSize="10"
              v-model:value="map_image"
              helpText="单个文件不超过10MB，最多只能上传1个文件"
          />
        </n-form-item>

        <n-form-item label="当前位置地图图标" path="mymap_image">
          <BasicUpload
              :action="`${uploadUrl1}/api/common/cosupdate`"
              :width="100"
              :height="100"
              name="file"
              @uploadChange="changeSitePicturemymap"
              :max="1"
              :maxSize="10"
              v-model:value="mymap_image"
              helpText="单个文件不超过10MB，最多只能上传1个文件"
          />
        </n-form-item>

        <n-form-item label="关注公众号宣传图" path="gzh_image">
          <BasicUpload
              :action="`${uploadUrl1}/api/common/cosupdate`"
              :width="100"
              :height="100"
              name="file"
              @uploadChange="changeSitePicturegzh"
              :max="1"
              :maxSize="10"
              v-model:value="gzh_image"
              helpText="单个文件不超过10MB，最多只能上传1个文件"
          />
        </n-form-item>

        <div>
          <n-space>
            <n-button type="primary" :loading="subLoading" @click="formSubmit">更新图片信息</n-button>
          </n-space>
        </div>
      </n-form>
    </n-grid-item>
  </n-grid>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useMessage, FormRules } from 'naive-ui';
  import { webconfigEdit,webconfiginfo } from '@/api/webconfig/index';
  import { useGlobSetting } from '@/hooks/setting';
  const globSetting = useGlobSetting();
  const { uploadUrl } = globSetting;
  const uploadUrl1 = uploadUrl;
  const user_image = ref([]);
  const agent_image = ref([]);
  const map_image = ref([]);
  const mymap_image = ref([]);
  const gzh_image = ref([]);
  
  const rules: FormRules = {
    
  };

  const defaultValueRef = () => ({
      user_image: '',
      agent_image: '',
      map_image: '',
      mymap_image: '',
      gzh_image: '',
  });

  const message = useMessage();
  const formRef: any = ref(null);
  const subLoading = ref(false);
  const formParams = ref(defaultValueRef());

  function formSubmit() {
    formRef.value.validate((errors) => {
      if (!errors) {
        formParams.value.user_image = user_image.value[0];
        formParams.value.agent_image = agent_image.value[0];
        formParams.value.map_image = map_image.value[0];
        formParams.value.mymap_image = mymap_image.value[0];
        formParams.value.gzh_image = gzh_image.value[0];
        webconfigEdit(formParams.value).then((_) => {
          message.success('更新成功');
        });
      } else {
        message.error('验证失败，请填写完整信息');
      }
    });
  }

  function getInfo() {
    webconfiginfo({}).then((res) => {
      const params = {
        
      };
      user_image.value = res.user_image;
      agent_image.value = res.agent_image;
      map_image.value = res.map_image;
      mymap_image.value = res.mymap_image;
      gzh_image.value = res.gzh_image;
      formParams.value = Object.assign(formParams.value, params);
    });
  }

  function changeSitePicture(file){
    user_image.value = file;
  }

  function changeSitePictureagent(file){
    agent_image.value = file;
  }

  function changeSitePicturemap(file){
    map_image.value = file;
  }

  function changeSitePicturemymap(file){
    mymap_image.value = file;
  }

  function changeSitePicturegzh(file){
    gzh_image.value = file;
  }

  onMounted(async () => {
    getInfo();
  });
</script>
